.contextmenu {
  position: fixed;
  z-index: 1000;

  ul {
    width: 280px;
    padding: 5px 0;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    background: #fff;
    list-style-type: none;

    li {
      padding: 9px;
      color: rgba(0, 0, 0, 0.65);
      white-space: nowrap;
      cursor: pointer;
      font-size: 14px;

      &:hover {
        background-color: #ecf6fd;
      }

      p {
        i {
          margin-right: 5px;
          font-size: 15px;
        }
      }
    }

    li.move:hover {
      ul.sub {
        display: block;
      }
    }

    hr {
      background-color: #ededed;
      border: none;
      height: 1px;
    }

    ul.sub {
      display: none;
      width: 200px;
      position: absolute;
      right: -200px;
      margin-top: -10px;
      max-height: 200px;
      overflow-y: auto;

      li {
        padding: 8px;
        display: flex;
        align-items: end;

        span.icon {
          width: 23px;
          height: 23px;

          .emoji {
            font-size: 17px;
            font-style: normal;
          }
        }

        span.title {
          margin-left: 5px;
        }
      }
    }
  }
}
